<template>
  <div>
    <div class="schedule-table">
      <ul class="table-header">
        <li v-for="v in tableHeader" :key="v.key" :style="{ width: v.width, flex: v.width ? 'unset' : '1' }">
          {{ v.title }}
        </li>
      </ul>
      <ul class="table-body">
        <li v-for="v in tableData">
          <div v-for="(vv, i) in tableHeader" :key="vv.key" class="body-li-item"
            :style="{ width: vv.width, flex: vv.width ? 'unset' : '1' }" v-html="setTxtByParam(v, i)">
          </div>
          <div class="schedule-bar" :style="{ left: barLeftMargin + 'px' }" v-if="v.status > 0">
            <div :class="setClassByStatus(v.status)" class="path-bar" :style="{
              marginLeft: setMarginLeft(v.start),
              marginRight: setmarginRight(v.end),
            }">
              <div class="cicle-icon">+</div>
              <div class="path-bar-txt">路段A、路段B</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
const tableColumns = 24;
const tableHeader = ref([
  { title: "班次", key: "banci", width: "130px" },
  { title: "收费员", key: "name", width: "130px" },
]);
// status：1-绿色   2-蓝色   3-红色
const tableData = ref([
  { name: "张三", start: "8.30", end: "18.30", status: 1 },
  { name: "张三", start: "15.30", end: "18.30", status: 2 },
  { name: "张三", start: "4.00", end: "12.30", status: 3 },
  { name: "张三", start: "5.30", end: "8.30", status: 1 },
]);
const initData = () => {
  for (let i = 0; i < tableColumns; i++) {
    tableHeader.value.push({ title: `${i}-${i + 1}`, key: `column-${i + 1}` });
  }
};
const setTxtByParam = (data, index) => {
  let headerItem = tableHeader.value[index];
  if (headerItem.key === "banci") {
    return `<div>123</div>`
  } else {
    return data[headerItem.key] ?? "";
  }
};
const barLeftMargin = computed(() => {
  return tableHeader.value.reduce((pre, cur) => {
    return (
      pre + ((cur.width ? cur.width.slice(0, cur.width.length - 2) : 0) - 0)
    );
  }, 0);
});
const setClassByStatus = (status) => {
  return {
    1: "green-bar",
    2: "blue-bar",
    3: "red-bar",
  }[status];
};
const setMarginLeft = (time) => {
  const timeArr = time.split(".");
  // 8.30转化为8.5
  let numbertime = Number(timeArr[0]) + ((timeArr[1] / 60).toFixed(2) - 0);
  return ((numbertime / 24) * 100).toFixed(2) + "%";
};
const setmarginRight = (time) => {
  const timeArr = time.split(".");
  let numbertime = 24 - Number(timeArr[0]) - (timeArr[1] / 60).toFixed(2);
  return ((numbertime / 24) * 100).toFixed(2) + "%";
};
initData();
</script>
<style lang='less' scoped>
.schedule-table {
  margin-top: 20px;
  width: 100%;
  height: 80%;
  font-size: 14px;

  .table-header {
    background-color: #f4f4f4;
    display: inline-flex;
    width: 100%;
    height: 55px;

    li {
      border: 1px solid #d1d1d1;
      flex: 1;
      border-right: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      &:last-of-type {
        border-right: 1px solid #d1d1d1;
      }
    }
  }

  .table-body {
    display: flex;
    width: 100%;
    flex-direction: column;

    li {
      width: 100%;
      height: 46px;
      display: flex;
      border-bottom: 1px solid #d1d1d1;
      position: relative;

      .schedule-bar {
        position: absolute;
        height: 100%;
        right: 0;
        display: inline-flex;

        .path-bar {
          background-color: red;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 15px;

          .cicle-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
          }

          .path-bar-txt {
            text-align: center;
            flex: 1;
            line-height: 46px;
            height: 46px;
          }
        }

        .green-bar {
          background-color: #c5eed2;
          color: #27ac51;

          .cicle-icon {
            background-color: rgb(53, 195, 98);
          }
        }

        .blue-bar {
          background-color: #c2dcff;
          color: #007aff;

          .cicle-icon {
            background-color: rgb(0, 122, 255);
          }
        }

        .red-bar {
          background-color: #ffe0dc;
          color: #f32d12;

          .cicle-icon {
            background-color: rgb(243, 45, 18);
          }
        }
      }

      .body-li-item {
        display: inline-flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #d1d1d1;

        &:last-of-type {
          border-right: 1px solid #d1d1d1;
        }
      }
    }
  }
}
</style>